<template>
  <div class="phone-number-container">
    <el-form
      ref="formRef"
      :model="phoneValidateForm"
      label-position="top"
      label-width="80px"
    >
      <el-form-item
        :error="errorMsg"
        prop="phoneNumber"
      >
        <div class="phone-input-wrapper">
          <el-input
            v-model="phoneValidateForm.phoneNumber"
            :disabled="validateSuccess"
            :placeholder="$t('rform.phoneVerification.placeholder')"
            :suffix-icon="validateSuccess ? 'CircleCheck' : ''"
            clearable
            maxlength="11"
            size="large"
          >
            <template #prefix>
              <el-icon
                class="el-input__icon"
                size="18"
              >
                <ele-Cellphone />
              </el-icon>
            </template>
            <template #suffix>
              <el-icon
                v-if="validateSuccess"
                color="#67C23A"
              >
                <ele-CircleCheck />
              </el-icon>
            </template>
          </el-input>
          <el-button
            v-if="!validateSuccess"
            :disabled="sendCodeBtnDisabled"
            :loading="loading"
            class="ml10"
            size="large"
            type="primary"
            @click="sendValidateMsgHandle"
          >
            {{ phoneValidateCodeBtnText }}
          </el-button>
          <el-button
            v-else
            class="ml10"
            size="large"
            @click="handleReSend"
          >
            <el-icon>
              <ele-RefreshRight />
            </el-icon>
            {{ $t("rform.phoneVerification.resend") }}
          </el-button>
        </div>
        <div
          v-if="sendStatus != null"
          class="code-input-wrapper mt10"
        >
          <el-input
            v-model="phoneValidateForm.code"
            :placeholder="$t('rform.phoneVerification.codePlaceholder')"
            size="large"
          >
            <template #prefix>
              <el-icon
                class="el-input__icon"
                size="18"
              >
                <ele-Key />
              </el-icon>
            </template>
          </el-input>
          <el-button
            :disabled="!phoneValidateForm.code"
            class="ml10"
            size="large"
            type="primary"
            @click="validateCodeHandle"
          >
            <el-icon>
              <ele-Check />
            </el-icon>
            {{ $t("formI18n.all.confirm") }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" name="PhoneVerification" setup>
import { ref } from "vue";
import type { FormInstance } from "element-plus";
import { usePhoneVerification } from "./usePhoneVerification";

const emit = defineEmits<{
  (e: "update:value", value: string | null): void;
}>();

const formRef = ref<FormInstance | null>(null);

const {
  phoneValidateCodeBtnText,
  errorMsg,
  sendCodeBtnDisabled,
  sendStatus,
  validateSuccess,
  phoneValidateForm,
  validateCodeHandle,
  handleReSend,
  sendValidateMsgHandle,
  loading
} = usePhoneVerification(emit, formRef);
</script>

<style lang="scss" scoped>
.phone-number-container {
  width: 100%;
}

.code-input-wrapper,
.phone-input-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;

  .el-input {
    width: 280px;
  }
}
</style>
